<template>
  <!-- 设置密码 -->
  <div class="loginByPassword">
    <img class="back" src="@/assets/img/icons/black/back.svg" @click="$router.back()" />
    <div class="title">账号密码登录</div>
    <div class="input-box">
      <input class="input" v-model="username" type="number" placeholder="请输入用户名" />
      <img v-show="username" class="clear" src="@/assets/img/icons/clear.svg" @click="username = ''" />
    </div>
    <div class="input-box">
      <input class="input" v-model="password" type="password" placeholder="请输入密码" />
      <img v-show="password" class="clear" src="@/assets/img/icons/clear.svg" @click="password = ''" />
    </div>
    <k-button
      class="login"
      :disable="password.length < 8 || !/^1[3|4|5|7|8][0-9]{9}$/.test(username)"
      :bgColor="password.length >= 8 && /^1[3|4|5|7|8][0-9]{9}$/.test(username) ? 'primary' : '#DFDFDF'"
      fontColor="#FFFFFF"
      fontSize="0.16rem"
      radius="0.03rem"
      @click="btnClick"
      >登录
    </k-button>
    <div class="bottom">
      <span class="code-login" @click="$router.back()">验证码登录</span>
      <span class="forgot-password" @click="$router.push('/foundPassword2')">忘记密码？</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loginByPassword',
  data() {
    return {
      username: '', //用户输入账号
      password: '', //用户输入密码
    }
  },
  methods: {
    //提交账号密码登录
    btnClick() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true, //禁止背景点击
        duration: 0,
      })
      //提交账号密码登录
      this.$network
        .main('passwordLogin', this.username, this.password)
        .then((data) => {
          this.$toast.clear() //清除toast
          //提示成功
          this.$toast({
            type: 'success',
            message: '登录成功',
          })
          this.$store.commit('setToken', data.token) //设置token
          setTimeout(() => {
            this.$updateUserInfo() //更新用户信息
          }, 50)
          this.$router.go(-2) //返回首页
        })
        .catch((err) => {
          this.$toast.clear() //清除toast
          this.$toast({
            type: 'fail',
            message: err,
          })
        })
    },
  },
}
</script>

<style scoped src="./index.css"></style>
